<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(function(){
	$('table#cdr').dataTable({
		"bProcessing":true,
		"bServerSide":true,
		"sAjaxSource":"/scripts/test.json",
		"aoColumns": [
            { "mData": "callingid" },
            { "mData": "ip" },
            { "mData": "end_reason" },
            { "mData": "up_packet_num" },
            { "mData": "down_packet_num" }
        ]
	});
});
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="cdr">
	<thead>
		<tr>
			<th width="20%">Rendering engine</th>
			<th width="25%">Browser</th>
			<th width="25%">Platform(s)</th>
			<th width="15%">Engine version</th>
			<th width="15%">CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="5" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</tfoot>
</table>
</body>
</html>